<template>
    <div style="background-color:#fff;">
        <!--滚动图-->
        <van-swipe :autoplay="3000"
                   indicator-color="white">
            <van-swipe-item :key="index"
                            v-for="(banner, index) in 3">
                <img src="//m.360buyimg.com/babel/jfs/t1/45084/32/13052/203338/5d9ef257E79e2abd4/6102ac569cd4a06b.png"
                     style="width: 100%">
            </van-swipe-item>
        </van-swipe>

        <!--分类-->
        <div style="width: 100%;display: flex;flex-wrap:wrap;padding: 0 15px">
            <div style="width: 20%;padding: 15px 10px 0px;" v-for="(channel, index) in catetree">
                <div :key="index" @click="changeTabbar(channel)">
                    <img :src="channel.iconUrl"
                         style="width: 100%; border-radius: 50%">
                    <p style="text-align: center;color: #666666;font-size: 12px">{{channel.name}}</p>
                </div>
            </div>
        </div>

        <!--设计潮牌-->
        <P style="font-size: 20px; font-weight: bold;padding: 0px 10px 0 10px;color: #333333; margin-top: 30px">设计潮牌</p>
        <P style="font-size: 12px;color: #cccccc;padding:  0 10px 0 10px">DESIGNER BRAND</p>

        <div style="width: 100%;background-color:#fff;margin-top: 10px">
            <div style="width: 100%">
                <img style="width: 100%"
                     src="//m.360buyimg.com/babel/s1242x486_jfs/t1/103046/25/8908/111008/5e09cc8dE2aab0795/88c9f5ec2c77b257.jpg!q70.dpg ">
            </div>
            <div style="width: 100%;background-color:#fff;box-sizing: border-box;padding: 10px;overflow: auto;overflow-x: scroll;white-space: nowrap;">
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/83079/28/7824/48103/5d5d57c0E0a7156bf/fea0031a6029c4d6.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/63744/21/5405/101197/5d393f3aEe04d6d50/37fd950693ec77c0.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/49468/13/12498/30000/5d975415E70feb65a/b362577506b1747b.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/43016/8/10094/26358/5d387abcE0d125acd/8c7bbfae43387165.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/51954/15/16690/57531/5dd8e3b4E6303a614/9665b0bb6ce9dcd4.jpg!q70.dpg">
                </div>
            </div>
        </div>
        <div style="width: 100%;background-color:#fff;margin-top: 10px">
            <div style="width: 100%">
                <img style="width: 100%"
                     src="//m.360buyimg.com/babel/s1242x486_jfs/t1/88442/4/8862/123628/5e09c965E8acfed0e/2dd7deb87f2ab57c.jpg!q70.dpg">
            </div>
            <div style="width: 100%;background-color:#fff;box-sizing: border-box;padding: 10px;overflow: auto;overflow-x: scroll;white-space: nowrap;">
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/45807/24/5940/62764/5d397450Efad911a8/54bfd791b674648b.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/39683/31/15184/30380/5d639012E965821aa/70112cff1f78f98c.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/55693/11/5814/63090/5d38b2dbE6d9f0531/747b914d0582c473.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/82401/6/10144/41582/5d7b9d46E364d9e7d/9ef7141a9fb5b114.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t29920/202/1492781246/50629/c48456f4/5ce14240N4ec4307d.jpg!q70.dpg">
                </div>
            </div>
        </div>
        <div style="width: 100%;background-color:#fff;margin-top: 10px">
            <div style="width: 100%">
                <img style="width: 100%"
                     src="//m.360buyimg.com/babel/s1242x486_jfs/t1/92238/35/8921/101992/5e09ca24E3ae0071d/53ef1bd61df62e3c.jpg!q70.dpg">
            </div>
            <div style="width: 100%;background-color:#fff;box-sizing: border-box;padding: 10px;overflow: auto;overflow-x: scroll;white-space: nowrap;">
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/98218/24/7488/49056/5dfc9aa6Eb5359c0a/cb195b3bd02f0679.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/60304/33/11003/22484/5d8502b0E8d719b19/d8ac0e74ae228f42.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/67717/6/10850/17140/5d8409ccE009a6072/1f6c1c6914bcf7cf.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/42275/14/14237/17360/5d716c88E5116c7d2/85ff266ec7e9528a.jpg!q70.dpg">
                </div>
                <div style="vertical-align: middle;width: 100px;position: relative;display: inline-block;">
                    <img style="width: 100%"
                         src="//m.360buyimg.com/babel/s347x347_jfs/t1/57738/23/11335/21643/5d84d495E11f9a0fe/c7ee6d1e7f4ba924.jpg!q70.dpg">
                </div>
            </div>
        </div>
    </div>
</template>

<script>
    import { getHome, adPositionList } from '@/api/api';

    import {
        Swipe,
        SwipeItem
    } from 'vant';

    export default {
        name: 'designer',
        data() {
            return {
                shopInfos: [],
                catetree: [],
                goodsList: []

            };
        },
        async created() {
            this.initViews();
        },
        methods: {
            link(path) {
                const newPath = 'http://' + path;
                window.location.href = newPath;
            },
            initViews() {
                getHome(
                        {
                            page: 1,
                            pageSize: 100
                        }
                ).then(res => {
                    this.shopInfos = res.data.data;
                    this.catetree = res.data.data.cateTree[0].children;
                    this.goodsList = res.data.data.goodsList[0];
                });
            }
        },
        components: {
            [Swipe.name]: Swipe,
            [SwipeItem.name]: SwipeItem
        }
    };
</script>

<style scoped>
    .goods-channel {
        display: flex;
        align-items: center;
        flex-wrap: wrap;
        padding-top: 20px;
        /*padding-bottom: 10px;*/
    }

    .goods-channel .item {
        width: 80px;
        height: 80px;
        /*!*margin-left: -40px;*/
        position: relative;
        left: 50%;
        border-radius: 50%;
        /*padding-top: 10px;*/
    }

    .goods-channel img {
        display: block;
        width: 50px;
        height: 50px;
        margin: 0 auto;
    }

    .goods-channel span {
        display: block;
        font-size: 12px;
        text-align: center;
        margin-top: 10px;
        margin-bottom: 10px;
        color: #333;
    }

    .goodspush {
        height: 330px;
        margin-top: 20px;
        position: relative;
    }

    .goodspush-left {
        height: 100%;
        position: absolute;
        left: 0;
        z-index: -1;
    }

    .goodspush img {
        height: 100%;
    }

    .goodspush-right {
        height: 100%;
        position: absolute;
        right: 0;
        z-index: -1;
    }

    /*.lrcont {*/
    /*    width: 50%;*/
    /*    height: 100px;*/
    /*    position: absolute;*/
    /*    top: 5px;*/
    /*    z-index: 2;*/
    /*    padding: 5px;*/

    /*}*/


    .bcont {
        width: 50%;
        top: 100px;
        position: absolute;
        z-index: 2;
        padding: 10px;
        margin-top: 10px;
    }

    .bcont img {
        width: 100%;
        height: auto;
    }
</style>
